<template>
    <el-dialog :model-value="props.value" title="组件设置" :width="900" destroy-on-close class="module-set-modal">
        <el-form ref="formRef" :model="form" :rules="rules" label-width="100px">
            <el-row :gutter="20">
                <el-col :span="12">
                    <el-form-item label="组件模型" prop="objectName">
                        <el-input v-model="form.objectName" disabled />
                    </el-form-item>
                </el-col>
                <el-col :span="12">
                    <el-form-item label="槽号" prop="slot">
                        <el-input v-model="form.slot" disabled />
                    </el-form-item>
                </el-col>
                <el-col :span="12">
                    <el-form-item label="组件名称" prop="deviceName">
                        <el-input v-model="form.deviceName" />
                    </el-form-item>
                </el-col>
                <el-col :span="12">
                    <el-form-item label="组件编号" prop="deviceNo">
                        <el-input v-model="form.deviceNo" />
                    </el-form-item>
                </el-col>
                <el-col :span="24">
                    <el-form-item label="描述" prop="description">
                        <el-input
                            v-model="form.description"
                            :rows="4"
                            type="textarea"
                            maxlength="200"
                            show-word-limit
                        />
                    </el-form-item>
                </el-col>
            </el-row>
        </el-form>

        <Asset :detailData="{ ...props.rowData, deviceNo }" :attributeTypeList="attributeTypeList" v-if="deviceNo" />

        <template #footer>
            <div class="dialog-footer">
                <el-button
                    type="primary"
                    @click="onSubmit(true, true)"
                    :loading="loading"
                    v-if="!props.rowData.enabled && deviceNo"
                >
                    确定并使用
                </el-button>
                <el-button v-if="!deviceNo" type="primary" @click="onSubmit(false)" :loading="loading">
                    下一步
                </el-button>
                <el-button type="primary" @click="onSubmit(true)" :loading="loading" v-else>确定</el-button>
                <el-button @click="props.close">取消</el-button>
            </div>
        </template>
    </el-dialog>
</template>
<script setup lang="ts">
import type { PopupBoxProps } from '@great/utils';
import type { FormInstance, FormRules } from 'element-plus';
import Asset from '@/pages/IoT/device/components/detail/baseInfo/components/Asset.vue';
import { reactive } from 'vue';
import { useRequest } from 'vue-request';
import { IoTDeviceService } from '@great/services';

interface IProps extends PopupBoxProps {
    attributeTypeList: Record<string, any>;
    callback: () => Promise<void>;
    rowData: Record<string, any>;
}
const props = defineProps<IProps>();
const deviceNo = ref(props.rowData.deviceNo);

const formRef = useTemplateRef<FormInstance>('formRef');
const form = reactive({
    ...props.rowData
});

const rules = reactive<FormRules<any>>({
    deviceName: [{ required: true, message: '请输入组件名称', trigger: ['change'] }],
    deviceNo: [{ required: true, message: '请输入组件编号', trigger: ['change'] }]
});

const { runAsync, loading } = useRequest(
    enabled => {
        return IoTDeviceService.editDevice({
            id: props.rowData.id,
            deviceNo: form.deviceNo,
            deviceName: form.deviceName,
            description: form.description,
            enabled: enabled || props.rowData.enabled
        });
    },
    {
        manual: true,
        onSuccess() {
            deviceNo.value = form.deviceNo;
        }
    }
);
function onSubmit(close: boolean, enabled?: boolean) {
    formRef.value?.validate(async valid => {
        if (valid) {
            await runAsync(enabled);
            if (close) {
                props.close();
                props.callback?.();
            }
        }
    });
}
</script>
<style lang="scss">
.module-set-modal {
    .Asset-wrapper {
        .title {
            font-size: 14px !important;
        }
    }
}
</style>
